import React, { useEffect, useState } from "react";
import { NavBar, Swiper, InfiniteScroll  } from "antd-mobile";
import { useSelector } from "react-redux";
import { useSearchParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import img1 from "../../../public/image/1.jpg";
import img2 from "../../../public/image/2.jpg";
import img3 from "../../../public/image/3.jpg";
import img4 from "../../../public/image/4.jpg";

import request from "../../utils/request";
import style from "./index.module.css";
const Left = () => {
  //   console.log(img1);
  const { avator } = useSelector((state) => state.user.userInfo);
  return (
    <img
      src={avator || "/public/vite.svg"}
      alt=""
      width={"30px"}
      height={"30px"}
      style={{ borderRadius: "50%" }}
    />
  );
};
const Right = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const city = searchParams.get("city") || "北京";
  return <span onClick={() => navigate("/city")}>{city}</span>;
};
function Home() {
  const [imgarr, SetImageArr] = useState([img1, img2, img3, img4]);
  const [list,setList] = useState([])

  const getDataArr=async()=>{
    const res=await request.get("/room/list")
    if(res.status&&res.data.code===10000){
        let arrNew=res.data.data.list
        setList(list.concat(arrNew))
    }
  }
  useEffect(()=>{
    // getDataArr()
  },[])

  
  return (
    <div className={style['home']}>
      <NavBar backIcon={false} left={<Left />} right={<Right />}>
        首页
      </NavBar>

      <Swiper loop autoplay={3000}>
        {imgarr.map((item, index) => {
          return (
            <Swiper.Item key={index}>
              <img
                key={index}
                src={item}
                alt=""
                width={"100%"}
                height={"200px"}
              />
            </Swiper.Item>
          );
        })}
      </Swiper>

      <div className={style['home-list']}>
        <h1>推荐</h1>
        <div className={style['home-list-box']}>
        {
            list.length>0&&list.map((item)=>{
                return <dl key={item.id}>
                    <dt>
                        <img src={item.url} alt="" />
                    </dt>
                    <dd>
                        <h2>{item.name}</h2>
                        <p>{item.person}</p>
                        <p>{item.title}</p>
                    </dd>
                </dl>
            })
        }
        {<InfiniteScroll loadMore={getDataArr} hasMore={true} />}
        <div style={{height:'50px'}}></div>
        </div>
        
      </div>
      
    </div>
  );
}

export default Home;
